<template>
	<div>
        <!-- <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="所属城市">
					<el-select-v2
                        v-model="queryParams.area_id"
                        filterable
                        clearable
                        :options="optionCity"
                        placeholder="请选择"
                        class="w-60"
                        :height="280"
                    />
				</el-form-item>
                <el-form-item label="群聊状态">
                    <el-select class="w-[280px]" v-model="queryParams.status">
                        <el-option label="全部" value/>
                        <el-option label="对单中" :value="1"/>
                        <el-option label="合作中" :value="0"/>
                        <el-option label="无状态" :value="3"/>
                        <el-option label="群聊解散" :value="4"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
					<div class="date-inp">
						<daterange-picker
							type="daterange"
							valueFormat="YYYY-MM-DD"
							v-model:startTime="queryParams.start_time"
							v-model:endTime="queryParams.end_time"
						/>
					</div>
				</el-form-item>
                <el-form-item label="群聊类型">
                    <el-select class="w-[280px]" v-model="queryParams.group_type">
                         <el-option label="全部" value/>
                         <el-option label="对单群" :value="1"/>
                         <el-option label="代理人群" :value="3"/>
                         <el-option label="其他群聊" :value="2"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card> -->
        <el-card class="!border-none" shadow="never">
            <router-link
                v-perms="['user.group/saveGroup']"
                :to="{path: getRoutePath('user.group/groupInfo')}"
            >
                <el-button type="primary" class="mb-4">
                    <template #icon>
                        <icon name="el-icon-Plus"/>
                    </template>
                    新建群聊
                </el-button>
            </router-link>
            <el-button type="primary" class="mb-4 ml-4" @click="addPerson">对单管家</el-button>

            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="序号" type="index" min-width="80" :index="indexAdd" />
                <el-table-column label="群聊ID" min-width="100" prop="id"/>
                <el-table-column label="群名称" min-width="180" prop="name"/>
                <el-table-column label="图片" min-width="160" prop="attach_urls">
                    <template #default="{ row }">
                        <div class="flex align-middle">
                            <el-image style="width: 38px; height: 38px"
                                    :src="row.pics"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2" 
                                    fit="contain"
                                    :preview-teleported="true"
                                    :preview-src-list="[row.pics]"></el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="简介" min-width="180" prop="introduction"/>
                <el-table-column label="公告" min-width="180" prop="notification"/>
                <el-table-column label="管理员名称" min-width="120" prop="user_id">
                    <template #default="{ row }">
                        <span>{{ row.userinfo.realname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="管理员账户" min-width="120" prop="user_type">
                    <template #default="{ row }">
                        <span>{{ row.userinfo.account }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="群聊类型" min-width="120" prop="group_type">
                    <template #default="{ row }">
                        <span v-if="row.group_type == 1">普通群</span>
                        <span v-if="row.group_type == 2">代理人群</span>
                        <span v-if="row.group_type == 3">合作群</span>
                        <span v-if="row.group_type == 4">服务商群</span>
                        <span v-if="row.group_type == 5">话题群</span>
                    </template>
                </el-table-column>
                 <el-table-column label="群聊状态" min-width="120" prop="cooperation_status">
                    <template #default="{ row }">
                        <span v-if="row.cooperation_status == 0">无状态</span>
                        <span v-if="row.cooperation_status == 1">群聊解散</span>
                        <span v-if="row.cooperation_status == 2">对单中</span>
                        <span v-if="row.cooperation_status == 3">合作中</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否允许私聊加好友" min-width="160" prop="can_add_friend">
                    <template #default="{ row }">
                        <el-switch v-model="row.can_add_friend" :active-value="1" :inactive-value="0" @change="onchange(row)" />
                    </template>
                </el-table-column>
                 <el-table-column label="创建时间" min-width="180" prop="created"/>
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="{ row }">
                        <router-link
                            v-perms="['user.group/groupInfo']"
                            :to="{ path: getRoutePath('user.group/groupInfo'), query: { id: row.id } }"
                        >
                            <el-link v-perms="['user.group/groupInfo']" type="primary" :underline="false">编辑</el-link>
                        </router-link>
                        <el-link class="link" v-perms="['user.group/delGroup']" type="danger" :underline="false" @click="handleDelGroup(row)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <add_peroson ref="addPeroson" />
    </div>
</template>
<script lang="ts" setup name="demandLists">
	import { groupList, delGroup, saveGroup } from '@/api/group';
	import { usePaging } from '@/hooks/usePaging';
    import { getRoutePath } from '@/router'
    import feedback from '@/utils/feedback'
    import useAppStore from '@/stores/modules/app'
    import add_peroson from './add_peroson.vue';
    const useApp = useAppStore()
    const optionCity:any = useApp.optionCity;

	let queryParams:any = reactive({
        area_id: '',
        status: '',
        start_time: '',
        end_time: '',
        group_type: ''
	});
    const addPeroson = ref()
	const addPerson = () => {
        addPeroson.value.init();
    }
	onMounted(async () => {
		getLists();
	});
    const handleEdit  = () => {
        checkState.show = true
        checkState.value = '0';
    }
    const checkState = reactive({
		show: false,
		value: ''
	})
    const handleConfirmCheck = async (res : any) => {
		console.log(res);
		checkState.show = false
	}

	//数组去重
	const unique = (arr: any[]) => {
			return arr.filter(function(item, index, arr) {
			//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
			return arr.indexOf(item, 0) === index;
		});
	}

    const handleDelGroup = async (row:any) => {
        console.log(row)
        try{
			await feedback.confirm('是否确认删除')
			await delGroup({
				group_id: row.id,
				user_id: row.user_id,
				user_type: row.user_type
			})
            getLists();
		}catch(error){
			console.log(error)
		}
    }

	// 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: groupList,
		params: queryParams
	})
    const onchange = async (row:any) => {
        console.log(row)
        await saveGroup(row)
        getLists()
    }

</script>
<style lang="scss" scoped>
.content{
    width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.link{
    margin: 0 10px;
}
.date-inp{
	::v-deep .el-range-editor.el-input__wrapper{
		width: 280px;
	}
}
</style>